<template>
    <div class="qilin-QilinSearch">
        <el-row>
            <el-col 
                :span="
                    ownSearchConfig.outerConfig.formCol ? ownSearchConfig.outerConfig.formCol :
                    ownSearchConfig.outerConfig.btnCol ? (24-ownSearchConfig.outerConfig.btnCol) : 20
                "
            >
                <el-form
                    :inline="true"
                    :ref="ownSearchConfig.elFormConfig.refName || 'formSearch' "
                    :label-width="ownSearchConfig.elFormConfig.labelWidth || '80px' "
                    :label-position="ownSearchConfig.elFormConfig.labelPosition || 'right' "
                    :label-suffix="ownSearchConfig.elFormConfig.labelSuffix || '：' "
                    :size="ownSearchConfig.elFormConfig.size || 'small' "
                    :model="ownSearchConfig.submitData"
                >
                    <template v-for="(item,index) in ownSearchConfig.itemConfig">
                        <el-form-item
                            :key="item.dataName || 'form-key-'+index "
                            :label="item.labelName || '搜索标签'+index "
                            :prop="item.dataName"
                            :class="[
                                item.className
                            ]"
                        >
                            <template v-if="item.type === 'slot' ">
                                <slot :name="item.slotName" :data="{item}"></slot>
                            </template>
                        </el-form-item>
                    </template>
                    <el-form-item>
                        <el-button type="primary" circle icon="el-icon-search" @click="searchData()"></el-button>
                        <el-button type="default" circle icon="el-icon-refresh-left" @click="resetSearchData()"></el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col
                :span="
                    ownSearchConfig.outerConfig.btnCol ? ownSearchConfig.outerConfig.btnCol :
                    ownSearchConfig.outerConfig.formCol ? (24-ownSearchConfig.outerConfig.formCol) : 4
                "
                class="qilin-QilinSearch-button-box"
            >
                <template v-for="(item,index) in ownSearchConfig.buttonConfig">
                    <el-button
                        :key="'button-'+index"
                        round
                        :type="item.type || 'primary' "
                        :size="item.size || 'small' "
                        :class="item.className"
                        @click="item.click && item.click(item)"
                    >{{item.btnName || "按钮"}}</el-button>
                </template>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name:"QilinSearch",
    props:{
        // 搜索表单的配置项
        searchConfig:{
            type:Object
        }
    },
    data(){
        return{
            // 组件自身的默认配置
            ownSearchConfig:{
                // 外层元素的宽度排列配置
                outerConfig:{
                    formCol:20,
                    btnCol:4
                },
                // el-form表单元素的相关配置
                elFormConfig:{
                    refName:"formSearch",
                    labelWidth:"90px",
                    labelPosition:"right",
                    labelSuffix:"：",
                    size:"small"
                },
                // 搜索表单结构相关配置项
                itemConfig:[],
                // 下拉列表数据配置
                selectLists:[],
                // 表单需要提交的数据配置
                submitData:{},
                // 搜索栏右侧按钮数据配置
                buttonConfig:[]
            }
        }
    },
    watch:{
        searchConfig:{
            handler(newValue,oldValue){
                this.initOwnSearchConfig(newValue);
            },
            immediate:true,
            deep:true
        }
    },
    methods:{
        // 将传来的配置赋值给组件自身
        initOwnSearchConfig(target){
            for(let key in target){
                if(Object.keys(this.ownSearchConfig).includes(key)){
                    this.ownSearchConfig[key]=target[key];
                };
            };
        },
        // 点击搜索按钮事件监听
        searchData(){
            this.$emit("searchData");
        },
        // 点击重置搜索表单事件监听
        resetSearchData(){
            this.$refs[this.ownSearchConfig.elFormConfig.refName || "formSearch"].resetFields();
            this.ownSearchConfig.itemConfig.forEach((item)=>{
                if(item.type === "slot"){
                    for(let i of item.slotDataName){
                        this.ownSearchConfig.submitData[i]="";
                    };
                };
            });
            this.searchData();
        }
    }
}
</script>
<style lang="less" scoped>
.qilin-QilinSearch{
    width:100%;
    .qilin-QilinSearch-button-box{
        text-align:right;
    }
}
</style>